<template>
  <div>
<div style="width: 500px; padding: 50px; margin: 50px auto; background: aliceblue">
  <h1 style="text-align: center">管理员登录</h1>
  <el-form ref="form" :rules="rules" :model="form" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit('form')">登录</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules:{
        username:[
          {required: true, message:'请输入用户名',trigger:'blur'}
        ],
        password:[
          {required: true, message:'请输入用户名',trigger:'blur'}
        ],

      }
    }
  },
  methods: {
    onSubmit(forName) {
      this.$refs[forName].validate((valid) => {
        if (valid) {
          //alert('参数格式正确,将允许提交请求到服务器端!');
          let url='http://localhost:8080/login';
          console.log('请求路径:'+url);
          console.log('请求参数:');
          console.log(this.form);

          this.axios.post(url, this.form).then((response) => {
            console.log('服务器的响应');
            console.log(response);
            let responseBody = response.data;
            if(responseBody==1){
              this.$message({
                message:'登录成功!(暂不跳转)',
                type:"success"
              })
            }else if(responseBody==2){
              this.$message.error('登录失败！密码错误！')
            }else{
              this.$message.error('登录失败！用户名不存在！');
            }

          });
        } else {
          alert('参数格式有误,不允许提交!');
          return false;
        }
      });

    }
  }
}
</script>


<style>

body{
  background: pink !important;
}

</style>